<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en"
	th:replace="header/header :: header('帅小铺客户帮助中心-实体商户社群服务平台',
	'/assets/layui/css/layui.css,/assets/module/admin.css',
	'/assets/libs/index/app.js')">
</head>
<body class="theme-my" data-theme="theme-my">
<style>
.ts-imglist {
    overflow: hidden;
    margin: 10px;
    margin-left: -15px;
}
.ts-imglist .child {
    position: relative;
    background: #f8f8f8;
    display: block;
    float: left;
    zoom: 1;
    *display: inline;
    margin-left: 15px;
    margin-top: 8px;
    height: 116px;
    width: 164px;
    text-align: center;
    cursor: pointer;
}
.webuploader-pick {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
    height: 100%;
    width: 100%;
}
.ts-imglist .child.open img {
    display: block;
    width: 46px;
    height: 46px;
    margin: 10px auto;
    margin-top: 25px;
}
.ts-imglist .child .title {
    color: #999;
    font-size: 12px;
}

.ts-imglist .child {
    position: relative;
    background: #f8f8f8;
    display: block;
    float: left;
    zoom: 1;
    margin-left: 15px;
    margin-top: 8px;
    height: 116px;
    width: 164px;
    text-align: center;
    cursor: pointer;
}
.ts-imglist .child>img {
    height: 116px;
    width: 164px;
}
.ts-imglist .child .close-icon {
    display: block;
    position: absolute;
    right: -8px;
    top: -8px;
    height: 18px;
    width: 18px;
    background: url(/assets/images/icon/close.png) no-repeat;
}
.fb_success {
    height: 670px;
    background-color: #fff;
    border-radius: 4px;
    text-align: center;
    padding-top: 160px;
}
.success_title {
    margin-top: 18px;
    margin-bottom: 28px;
}
.success_title span {
    font-size: 25px;
    line-height: 25px;
}
.success_desc {
    margin-bottom: 10px;
    color: #666;
}
.success_desc span {
    font-size: 14px;
    line-height: 14px;
}
</style>
<!-- 顶部导航-->
<div th:replace="common/index/indexbar :: indexbar"></div>
<!--头条主体-->
<div class="fbcontent">
  <div class="fb_guide">
    <span>
      <a href="#" id="a_index">首页</a>
    </span>
    <i class="layui-icon layui-icon-right"></i>
    <span>
      <a href="" id="a_suggest">网站建议</a>
    </span>
  </div>
  <div class="feedbackPM58 clearfix">
    <div class="fb_container">
     	<div class="layui-form" style="padding: 20px;">
     		<div class="layui-form-item">
			    <label class="layui-form-label layui-form-required">类别</label>
			    <div class="layui-input-block">
			      <input type="radio" name="ftype" value="1" title="信息分类" >
			      <input type="radio" name="ftype" value="2" title="功能异常">
			      <input type="radio" name="ftype" value="3" title="创意点子">
			      <input type="radio" name="ftype" value="4" title="其他" checked>
			    </div>
		  	</div>
		  	<div class="layui-form-item">
			    <label class="layui-form-label layui-form-required" style="width: 100px;">意见内容</label>
			    <div class="layui-input-block" style="width: 800px;">
			      <textarea name="content" placeholder="您可填写15-500字 您的建议会让我们变得更好!请注意：如有问题需要咨询或解决，请去常见问题或智能客服或联系客服，谢谢！" lay-vertype="tips" lay-verify="required" required class="layui-textarea"></textarea>
			    </div>
		  	</div>
		  	<div class="layui-form-item">
			    <label class="layui-form-label" style="width: 100px;">上传图片</label>
			    <div class="layui-input-block">
			    	<div class="ts-imglist">
				    	<div class="child open webuploader-container" id="ts-upopen">
				    		<div class="webuploader-pick">
				    			<img src="/assets/images/icon/add_img.png" id="resimg">
				    			<span class="title">上传图片</span>
				    		</div>
				    	</div>
			    	</div>
			    </div>
			    
		  	</div>
		  	<div class="layui-form-item">
			    <label class="layui-form-label layui-form-required" style="width: 100px;">手机号</label>
			    <div class="layui-input-inline" style="width: 200px;">
			    	<input type="text" name="phone" id="phone" required  lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
			    </div>
			    <button class="layui-btn" id="snedCode" lay-event="snedCode">获取验证码</button>
		  	</div>
		  	<div class="layui-form-item">
			    <label class="layui-form-label layui-form-required" style="width: 100px;">验证码</label>
			    <div class="layui-input-inline" style="width: 200px;">
			    	<input type="text" name="code" required  lay-verify="required" placeholder="请输入验证码 " autocomplete="off" class="layui-input">
			    </div>
		  	</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
			      <button class="layui-btn layui-btn-radius layui-btn-sm" style="width:100px;" lay-submit lay-filter="formHelp">提交建议</button>
			    </div>
			</div>
      	</div>
    </div>
    <div class="fb_success layui-hide">
      <div>
        <i class="layui-icon layui-icon-ok-circle" style="font-size: 60px;color: #67c49a;"></i>
      </div>
      <div class="success_title">
        <span>提交成功</span>
      </div>
      <div class="success_desc">
        <span>非常感谢您的反馈！</span>
      </div>
      <div class="success_desc">
        <span>我们会认真考虑您的建议并对产品和服务进行优化</span>
      </div>
    </div>
  </div>
</div>

<!-- 页脚 -->
<div th:replace="common/footer :: footer"></div>

<!-- 帮我找铺 -->
<script type="text/javascript">
layui.use(['layer', 'form', 'formX', 'setter', 'mynotice', 'admin', 'ax', 'util', 'upload'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var formX = layui.formX;
    var setter = layui.setter;
    var mynotice = layui.mynotice;
    var admin = layui.admin;
    var $ax = layui.ax;
    var util = layui.util;
    var upload = layui.upload;
    
    var Help = {
    	pattern: /^1(3|4|5|7|8)\d{9}$/,
    	uuid: '',
    	imgurl: [],
    	num: 0,
    	uploadInst: {},
    	uploadRender: () => {
    		Help.uploadInst = upload.render({
    	        elem: '#ts-upopen', //绑定元素
    	        url: '/common/helpimg', //上传接口
    	        acceptMime: 'image/*',
    	        size: 5 * 1024 * 1024,
    	        field: 'uploadFile',
    	        done: function(res){
    	        	var html = '<div class="child upload-state-done"><img src="'+ res.data +'" class="imgresurl"><i class="close-icon" lay-event="closeimg"></i></div>';
    	        	$('#ts-upopen').before(html);
    	        	Help.num += 1;
    	        	if(Help.num == 5){
    	        		$('#ts-upopen').remove();
    	        	}
    	        	mynotice.success('上传成功');
    	        },
    	        error: function(res){
    	        	//请求异常回调
    	        	mynotice.error(res.msg);
    	        }
    	      });
    	}	
    }
    
    Help.uploadRender();
    
    util.event('lay-event', {
    	closeimg: function(){
    		$(this).parent().remove();
    	},
    	snedCode: () => { // 发送验证码
        	var phone = $('#phone').val();
        	if(!phone){
        		mynotice.error('请输入手机号');
        		return false;
        	}
        	if(!Help.pattern.test(phone)){
        		mynotice.error('手机号码格式不正确');
            	return false;
        	}
        	admin.btnLoading('#snedCode', '&nbsp;验证码发送中'); 
        	var ajax = new $ax("/fast/sms", 'get', function (res) {
        		Help.uuid = res.data;
        		admin.btnLoading('#snedCode', false);
        		formX.startTimer('#snedCode', 30, function(time){
        			if(time == 1){
        				$('#snedCode').attr('disabled', false)
        			}
        			return time + 's 后可继续发送';
                });
            }, function (res) {
            	admin.btnLoading('#snedCode', false);
            	$('#snedCode').attr('disabled', false)
            	mynotice.error(res.msg);
            });
        	ajax.set('phone', phone);
            ajax.start();
        },
    })
    
  	//监听提交
    form.on('submit(formHelp)', function(data){
		mynotice.load('提交中，请稍后...');
  		var ajax = new $ax('/zp/feedback/add', 'post', function (res) {
	  		mynotice.destroy();
	  		mynotice.success("提交成功！");
	  		$('.fb_container').addClass('layui-hide');
	  		$('.fb_success').removeClass('layui-hide');
		}, function (res) {
 			mynotice.destroy();
 			mynotice.error(res.msg);
  		});
  		Help.imgurl = [];
  		$('.imgresurl').each(function(){
  			Help.imgurl.push($(this).attr("src"));
		});
  		data.field.imgurl = Help.imgurl.join(',');
  		data.field.uuid = Help.uuid;
  		ajax.setData(JSON.stringify(data.field));
  		ajax.start();
  		return false;
	});
    
});   
</script>
	
</body>
</html>